<template>
  <div class="dealerStatistics">

    <van-row class="dealerStatistics-top">
      <van-col span="8">
        <van-button style="width:100%;"  @click="timePopup=true">时间<i class="iconfont icon-xia"></i></van-button>
      </van-col>
      <van-col span="8">
        <van-button style="width:100%;"  @click="storesShow=true">店仓<i class="iconfont icon-xia"></i></van-button>
      </van-col>
      <van-col span="8">
        <van-button style="width:100%;"  @click="sortShow=true">排序<i class="iconfont icon-xia"></i></van-button>
      </van-col>
    </van-row>

    <div class="dealerStatistics-menu">
      <div style="display: flex">
        <p style="width:50%;margin:0 0 10px 0;">
          当前客户:
          <!--<van-button disabled style="font-weight: bold;color:#67C23A;height:30px;line-height: 30px;">{{customerName}}</van-button>-->
          <span class="kehuss" :style="{color:color}">{{customerName}}</span>
        </p>
        <p style="width:50%;margin:0 0 10px 0;line-height: 30px;">
          当前库存:<span :style="{color:color}">{{kucun}}</span>
        </p>
      </div>

      <div style="display: flex">
        <div style="width:33.33%;border-right:1px solid #ddd;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
          <p style="margin:0;">入库总数</p>
          <span :style="{color:color}">{{rk_num}}</span>
          <p style="margin:5px 0 0 0">总金额</p>
          <span :style="{color:color}">￥{{rk_money}}</span>
        </div>
        <div style="width:33.33%;border-right:1px solid #ddd;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
          <p style="margin:0;">退货总数</p>
          <span :style="{color:color}">{{th_num}}</span>
          <p style="margin:5px 0 0 0">总金额</p>
          <span :style="{color:color}">￥{{th_money}}</span>
        </div>
        <div style="width:33.33%;border-right:1px solid #ddd;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
          <p style="margin:0;">销售总数</p>
          <span :style="{color:color}">{{xs_num}}</span>
          <p style="margin:5px 0 0 0">总金额</p>
          <span :style="{color:color}">￥{{xs_money}}</span>
        </div>
      </div>

    </div>

    <!--内容部分-->
    <div class="dealerStatistics-content">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getAllFn"
      >
        <div v-if="typeof dataList=='string'" style="color:#ddd;padding:10px 0;background: #fff;">{{dataList}}</div>
        <van-row v-else style="padding:1% 5px;margin:15px 0;background: #fff;
    border-radius: 3px;" v-for="(item,index) in dataList" :key="index" >
          <van-col span="24" style="text-align: left;color:#000;">
            店仓名:【{{item.store_name}}】
          </van-col>
          <van-col span="24"  style="text-align: left;color:#000;padding:5px 0;">
            商品名:{{item.goodsName}}
          </van-col>
          <van-col span="12"  style="text-align: left;color:#000;padding:5px 0;">
            货号:{{item.sn}}
          </van-col>
          <van-col span="12"  style="text-align: left;color:#000;padding:5px 0;">
            编码:{{item.numero}}
          </van-col>
          <van-col span="12"  style="text-align: left;padding:5px 0;">
            入库数量: <span :style="{color:color}">{{item.rk_num}}</span>
          </van-col>
          <van-col span="12"  style="text-align: left;padding:5px 0;">
            入库金额: <span :style="{color:color}">￥{{item.rk_money}}</span>
          </van-col>
          <van-col span="12"  style="text-align: left;padding:5px 0;">
            退货数量: <span :style="{color:color}">{{item.th_num}}</span>
          </van-col>
          <van-col span="12"  style="text-align: left;padding:5px 0;">
            退货金额: <span :style="{color:color}">￥{{item.th_money}}</span>
          </van-col>
          <van-col span="12"  style="text-align: left;padding:5px 0;">
            销售数量: <span :style="{color:color}">{{item.xs_num}}</span>
          </van-col>
          <van-col span="12"  style="text-align: left;padding:5px 0;">
            销售金额: <span :style="{color:color}">￥{{item.xs_money}}</span>
          </van-col>
          <van-col span="24"  style="text-align: left;padding:5px 0;">
            库存: <span :style="{color:color}">{{item.kucun}}</span>
          </van-col>
        </van-row>

        <div class="noDatas" :style="{display:block}">
          数据已加载完
        </div>
      </van-list>
    </div>

    <!--底部-->
    <div class="dealerStatistics-bottom">
      <p style="margin:0;">总条数: <span :style="{color:color}">{{total}}</span></p>
    </div>


    <!--时间弹层-->
    <van-popup v-model="timePopup" @click-overlay="getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev"  class="timeMask">
      <van-cell-group>
        <van-cell title="开始时间" class="sTimeMask" is-link :value="getCurrentDate" @click="startPopupShow=true"/>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="结束时间" class="sTimeMask" is-link :value="getEndCurrentDate" @click="endPopupShow=true"/>
      </van-cell-group>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button  class="maskBtn"   @click="timePopup=false,getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button  type="primary"   class="maskBtn" @click="getList">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <!--开始时间的弹出层-->
    <van-popup v-model="startPopupShow" class="stimeMask" >
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="startTimeFn"
        @cancel="startPopupShow=false"
      />
    </van-popup>
    <!--结束时间的弹出层-->
    <van-popup v-model="endPopupShow" class="stimeMask" >
      <van-datetime-picker
        v-model="endCurrentDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="endTimeFn"
        @cancel="endPopupShow=false"
      />
    </van-popup>

    <!--排序弹层-->
    <van-popup v-model="sortShow" @click-overlay="sortShow=false,sortRadio=sortRadioNext" class="mask-paixu">
      <van-radio-group v-model="sortRadio" style="margin-bottom:10px;">
        <van-cell-group >
          <van-cell title="按销售金额" style="text-align: left;;" clickable @click="sortRadio = '1'">
            <van-radio name="1" />
          </van-cell>
          <van-cell title="按销售数量" style="text-align: left;" clickable @click="sortRadio = '2'">
            <van-radio name="2" />
          </van-cell>
          <van-cell title="按库存数量" style="text-align: left;" clickable @click="sortRadio = '3'">
            <van-radio name="3" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!--按钮-->
      <van-row>
        <van-col span="12"  style="padding:0 10px;">
          <van-button  @click="sortShow=false,sortRadio=sortRadioNext" class="maskBtn">取消</van-button>
        </van-col>
        <van-col span="12"  style="padding:0 10px;">
          <van-button  type="primary" @click="getSortFn"  class="maskBtn">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--店仓弹出层-->
    <van-popup v-model="storesShow" @click-overlay="storesResult=storesResultPrev"  :overlay="true" class="dc-Mask">

      <div class="stockList" style="overflow: scroll;height:87%;margin-bottom:10px;">
        <div v-if="stores.length==0" style="color:#ddd;padding:10px 0;">暂无数据(请先选择客户)</div>
        <van-checkbox-group v-else v-model="storesResult">
          <van-cell-group>
            <van-cell style="text-align: left;" v-for="(item,index) in stores" :title="` ${item.name}`" :key="index" >
              <van-checkbox :name="item.id" @change=""/>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>

      </div>

      <!--按钮-->
      <van-row >
        <van-col span="8" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="resetDCFn">重置</van-button>
        </van-col>
        <van-col span="8" style="padding:0 10px;">
          <!--closeDcFn getDcFn -->
          <van-button  class="maskBtn"  @click="closeDcFn">取消</van-button>
        </van-col>
        <van-col span="8" style="padding:0 10px;">
          <van-button  type="primary"  class="maskBtn" @click="getDcFn">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>


    <!--搜索-->
    <van-button class="dealerStatistics-sousuo" @click="goodsShow=true">
      <i class="iconfont icon-fangdajingcopy"></i>
    </van-button>
    <!--商品关键字搜索-->
    <van-popup v-model="goodsShow" @click-overlay="goodsValue=''" class="sousuoMask">
      <p >搜索商品</p>
      <van-cell-group style="margin:5% 3%">
        <van-field v-model="goodsValue" style="border:1px solid #ddd;border-radius:5px;" placeholder="请输入商品信息" />
      </van-cell-group>
      <van-row>
        <van-col span="12" style="padding:0 10px;">
          <van-button class="maskBtn"  @click="goodsValue='',goodsShow=false">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button class="maskBtn"  type="primary" @click="onSearh">搜索</van-button>
        </van-col>
      </van-row>
    </van-popup>


    <!--返回-->
    <backs></backs>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import backs from "@/components/menu/backPrev";
  export default {
    name: "dealerStatisticsInfo",
    computed: {
      ...mapState({
        memberDetails:"data"
      })
    },
    components: {
      backs
    },
    data(){
      return {
        color:'#0D90EB',
        block: 'none',
        //时间弹出层
        timePopup:false,
        startPopupShow:false,//开始时间的弹出层
        minHour: 10,
        maxHour: 20,
        minDate: new Date(2016,1,1),
        maxDate: new Date(2019,12,31),
        currentDate: {},//当前时间
        getCurrentDate:"",
        getCurrentDatePrev:"",//记录上一次的值

        endPopupShow:false,//结束时间的弹出层
        endCurrentDate: {},//本月的最后一天的时间
        getEndCurrentDate:"",
        getEndCurrentDatePrev:"",//记录上一次的值

        //店仓
        storesShow:false,
        stores:[],
        storesResult:[],//选中的
        storesResultPrev:[], // 上一次选中的

        //商品关键字过滤
        goodsShow:false,
        goodsValue:"",
        goodsValuePrev:"",

        //排序方式
        sortShow:false,
        sortRadio:"2",
        sortRadioNext:"2",//存入上一次的选项

        //获取数据
        page:1,
        pageSize:10,
        total:0,
        dataList:[],
        loading: false,
        finished: false,
        kucun:0, // 库存
        rk_money:0,// 入库总金额
        rk_num:0, // 入库总数
        th_money:0, // 退货总金额
        th_num:0, // 退货总数
        xs_money:0, // 销售总金额
        xs_num:0,  // 销售总数

        //传的值
        customerId:0,// 客户的租户id
        storeId:[],    // 客户店仓id数组
        customerName:'',
      }
    },
    methods: {
      getAllFn(){
        var $this = this;
        this.$http.item.post('/report/dealerInfo',{
          curPage: $this.page,                           //页数
          pageSize: $this.pageSize,                         // 每页条数
          startTime: $this.getCurrentDate,     //开始时间
          endTime: $this.getEndCurrentDate,       // 结束时间
          customerId: $this.customerId,                       //客户的租户id数组
          storeId: $this.storesResult,                          //客户店仓id数组
          keyword: $this.goodsValuePrev,                   // 商品关键字
          order: $this.sortRadio                          // 排序方式 – 1.按销售金额，2.销售数量(默认)，3.库存数量
        })
          .then(function (response) {
            // console.log(response.data.data);
            $this.page++;
            $this.total = response.data.data.allsize
            $this.kucun = response.data.data.kucun;
            $this.rk_money = response.data.data.rk_money;// 入库总金额
            $this.rk_num = response.data.data.rk_num; // 入库总数
            $this.th_money = response.data.data.th_money; // 退货总金额
            $this.th_num = response.data.data.th_num; // 退货总数
            $this.xs_money = response.data.data.xs_money; // 销售总金额
            $this.xs_num = response.data.data.xs_num;  // 销售总数

            for (let i = 0; i < response.data.data.info.length; i++) {
              $this.dataList.push(response.data.data.info[i]);
            }

            $this.loading = false;
            // console.log(response.data.data.data);
            if(!response.data.data.info.length){
              $this.dataList="未找到相关数据";
              $this.finished = true;
              $this.block = 'none';
            }else if ($this.dataList.length >= $this.total) {
              $this.finished = true;
              $this.block = 'block';
            }

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //给开始、结束时间赋值
      getNowTime(){
        //获取开始时间
        var myDate = new Date();
        var mytime=myDate.getMonth();
        var y=myDate.getFullYear();

        this.currentDate=new Date(y,mytime,1);

        var y = this.currentDate.getFullYear();
        var m = this.currentDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.currentDate.getDate();
        d = d < 10 ? ('0' + d) : d;

        this.minDate=new Date(1900,0,1);
        // this.minDate=new Date(y,m-1,d);
        //获取选择的当前时间
        this.getCurrentDate=y + '-' + m + '-' + d+" 00:00:00";
        this.getCurrentDatePrev=y + '-' + m + '-' + d+" 00:00:00";


        //结束时间
        this.endCurrentDate=new Date(y,mytime+1,0);
        var y2 = this.endCurrentDate.getFullYear();
        var m2 = this.endCurrentDate.getMonth() + 1;
        m2 = m2 < 10 ? '0' + m2 : m2;
        //构造一个日期对象：获取当月的最后一天
        var day = new Date(y2,m2,0);
        //获取天数：
        var d2 = day.getDate();
        //获取选择的结束时间
        this.getEndCurrentDate=y2 + '-' + m2 + '-' + d2+" 23:59:59";
        this.getEndCurrentDatePrev=y2 + '-' + m2 + '-' + d2+" 23:59:59";

        this.maxDate=new Date(y2,m2-1,d2,23,59,59);

      },
      //点击开始时间的确定按钮
      startTimeFn(){
        this.startPopupShow=false;//隐藏弹出层
        var y = this.currentDate.getFullYear();
        var m = this.currentDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.currentDate.getDate();
        d = d < 10 ? ('0' + d) : d;

        var hour = this.currentDate.getHours() < 10 ? "0" + this.currentDate.getHours() : this.currentDate.getHours();
        var minute = this.currentDate.getMinutes() < 10 ? "0" + this.currentDate.getMinutes() : this.currentDate.getMinutes();
        //获取选择的当前时间
        this.getCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":00";

        // this.getCustomerAccountInfo();
      },
      //点击结束时间的确定按钮
      endTimeFn(){
        this.endPopupShow=false;//隐藏弹出层
        var y = this.endCurrentDate.getFullYear();
        var m = this.endCurrentDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.endCurrentDate.getDate();
        d = d < 10 ? ('0' + d) : d;
        var hour = this.endCurrentDate.getHours() < 10 ? "0" + this.endCurrentDate.getHours() : this.endCurrentDate.getHours();
        var minute = this.endCurrentDate.getMinutes() < 10 ? "0" + this.endCurrentDate.getMinutes() : this.endCurrentDate.getMinutes();
        //获取选择的时间
        this.getEndCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":59";


        // this.getCustomerAccountInfo();

      },
      //时间弹层的确定按钮
      getList(){
        this.timePopup=false;
        this.page=1;
        this.loading = true;
        this.dataList = [];
        this.block = "none";
        this.finished = false;
        this.getAllFn();
      },
      //搜索确定按钮
      onSearh(){
        this.goodsShow=false;
        this.goodsValuePrev=this.goodsValue;
        this.page=1;
        this.dataList = [];
        this.block = "none";
        this.loading = true;
        this.finished = false;
        this.getAllFn();
      },
      //排序的确定按钮
      getSortFn(){
        this.sortShow=false;
        this.sortRadioNext=this.sortRadio;
        this.page=1;
        this.dataList = [];
        this.block = "none";
        this.loading = true;
        this.finished = false;
        // console.log(this.sortRadioNext)
        this.getAllFn();
      },
      // 获取店仓
      getStoresFn(){
        var $this = this;
        this.$http.setting.post('store/search',{
          tid : $this.customerId
        }).then(res => {
          // console.log(res.data)
          if(!res.data.code){
            $this.stores = res.data.data;
          }else{
            $this.stores = [];
          }
        })
      },
      // 店仓的确定按钮
      getDcFn(){
        this.storesShow = false;
        this.storesResultPrev = this.storesResult;
        // this.storeId.push(this.$route.params.storeId);
        this.page=1;
        this.loading = true;
        this.finished = false;
        this.dataList = [];
        this.block = "none";
        this.getAllFn();
      },
      resetDCFn(){
        this.storesResult = []
      },
      // 店仓的取消按钮
      closeDcFn(){
        this.storesShow = false;
        this.storesResult = this.storesResultPrev
      },
    },
    mounted(){
      this.customerId = this.$route.params.customerId;
      this.storesResult.push(this.$route.params.storeId);
      this.storesResultPrev.push(this.$route.params.storeId);
      this.customerName = this.$route.params.customerName;
      this.getNowTime();
      this.getStoresFn();
    }
  }
</script>

<style scoped>
  .dealerStatistics{
    font-size:14px;
    color:#666;
  }
  .dealerStatistics-sousuo{
    position: fixed;
    bottom:170px;
    right:10px;
    background:rgba(0,0,0,.5);
    width:55px;
    height:55px;
    color:#fff;
    font-size:12px;
    padding:12px 0;
    border-radius: 8px;
    line-height: initial;
  }
  .dealerStatistics-top{
    position: fixed;
    top:0;
    left:0;
    background: #fff;
    width:100%;
  }
  .dealerStatistics-menu{
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
    margin-top:45px;
    background: #fff!important;
    position: fixed;
    top:0;
    left:0;
    color:#000;
  }
  .dealerStatistics-content{
    margin-top:198px;
    margin-bottom:27px;
    padding:5px;
  }
  .dealerStatistics-bottom{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    border-top:1px solid #ccc;
    padding:5px;
    font-size:12px;
    background: #fff;
  }

  .timeMask{
    width:320px;padding:5px 0;background: #fff!important;border-radius: 5px;
  }
  .sTimeMask{
    text-align: left;border-top:1px solid #e5e5e5;
    font-size:12px;
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }
  .stimeMask{
    width:320px;border-radius:5px;
  }
  .mask-paixu{
    width:320px!important;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .dc-Mask{
    width:320px!important;height:426px;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .sousuoMask{
    width:320px!important;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .sousuoMask>p{
    font-size:16px;color:#888
  }
  .kehuss{
    font-weight: bold;
    height:30px;
    line-height: 30px;
    font-size:16px;
  }
</style>
